<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet">
    <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 10px;
            top:30px;
        }

    </style>

</head>
<body>
<input id="run" type="button" value="run">
<input id="stop" type="button" value="stop">
<input id="dequeue" type="button" value="dequeue">
<input id="finish" type="button" value="finish">

<div>

</div>
<script >
    $('#run').click(function() {

        $('div').animate( {
            'top':'400px'
        },2000).animate({
            'left':'400px'
        },2000).animate({
            'top':'30px'
        },2000).animate({
            'left':'10px'
        },2000);

    });
    $('#stop').click(function () {
        //$('div').stop(true,true);//直接停止了不动
        //$('div').stop(true,false);//运动到哪停止在哪了
        //$('div').stop(false,true);//直接跳到下一段动画
        $('div').stop(false,false);//停止当前动画，直接执行下一段动画
    });
    $('#dequeue').click(function () {
        $('div').dequeue();//直接移除当前动画后面的动画到最后
    });
    $('#finish').click(function () {

        $('div').finish();
    });
</script>

</body>
</html>